<template>


  <div class="hospital">


    <!--左侧的菜单导航栏-->
    <div class="menu">
      <div class="top">
        <svg t="1705401896656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="10274" width="16" height="16">
          <path
              d="M69.12 514.56c-10.24 0-20.48-7.68-25.6-17.92-2.56-10.24 0-20.48 7.68-28.16L422.4 122.88c38.4-35.84 99.84-35.84 138.24 0l366.08 343.04c10.24 10.24 10.24 25.6 0 35.84-10.24 10.24-25.6 10.24-35.84 2.56L524.8 163.84c-20.48-17.92-48.64-17.92-69.12 0L84.48 506.88c-2.56 5.12-7.68 7.68-15.36 7.68z m0 0"
              p-id="10275"></path>
          <path
              d="M696.32 936.96h-128V673.28c0-43.52-35.84-76.8-76.8-76.8-43.52 0-76.8 35.84-76.8 76.8v261.12h-128c-56.32 0-104.96-46.08-104.96-102.4V476.16c0-15.36 12.8-28.16 28.16-28.16 15.36 0 28.16 12.8 28.16 28.16v355.84c0 12.8 5.12 25.6 15.36 35.84 10.24 10.24 23.04 15.36 35.84 15.36H358.4v-207.36c0-71.68 58.88-130.56 130.56-130.56s130.56 58.88 130.56 130.56v207.36h74.24c12.8 0 25.6-5.12 35.84-12.8 10.24-10.24 15.36-23.04 15.36-35.84v-358.4c0-15.36 12.8-28.16 28.16-28.16 15.36 0 28.16 12.8 28.16 28.16v355.84c0 56.32-46.08 102.4-104.96 104.96z m0 0"
              p-id="10276"></path>
        </svg>
        <span>/ 医院信息</span>
      </div>
      <el-menu
          default-active="$route.path"
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="/hospital/register" @click="changeActive('/hospital/register')">
          <el-icon>
            <Calendar/>
          </el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail" @click="changeActive('/hospital/detail')">
          <el-icon>
            <document/>
          </el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice" @click="changeActive('/hospital/notice')">
          <el-icon>
            <Message/>
          </el-icon>
          <span>预约须知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/close" @click="changeActive('/hospital/close')">
          <el-icon>
            <InfoFilled/>
          </el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search" @click="changeActive('/hospital/search')">
          <el-icon>
            <Compass/>
          </el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!--右侧医院内容详情展示-->
    <div class="content">

      <!--子组件展示结构的地方-->
      <router-view></router-view>

    </div>
  </div>
</template>

<script setup lang="ts">

/*引入element-plus图标*/
import {
  Document,
  InfoFilled,
  Calendar,
  Message,
  Compass
} from '@element-plus/icons-vue'

import {useRouter, useRoute} from "vue-router";
//创建路由对象
let $router = useRouter();
//获取路由信息
let $route = useRoute();


//点击事件路由回调
const changeActive = (path: string) => {
  $router.push({path});


}

</script>


<style scoped lang="scss">
.hospital {
  display: flex;

  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      color: #7f7f7f;
    }

  }

  .content {
    flex: 8;
  }
}
</style>
